<script setup>
// 导入图标
import { DArrowRight } from '@element-plus/icons-vue'
// 引入组件
import MyGoodsItem from '@/components/MyGoodsItem.vue'
import { getHomeListService } from '@/api/home'
import { ref } from 'vue'

const HomeList = ref([])

var k = ref(0)
const getHomeList = async () => {
  console.log(k)
  const {
    data: { data }
  } = await getHomeListService()
  HomeList.value = data
}

getHomeList()
</script>

// 布局
<template>
  <div class="shop" v-for="item in HomeList" :key="item.id">
    <!-- 标题 -->
    <div class="title">{{ item.name }}</div>
    <!-- 内容 -->
    <div class="box">
      <el-image class="img" :src="item.header" fit="cover" />
      <div class="content">
        <!-- 商品列 -->
        <MyGoodsItem :goods="item.list"></MyGoodsItem>
        <div class="more" v-if="item.list.length >= 6">
          <a @click="this.$router.push('/goods')"
            >浏览更多&nbsp;<el-icon>
              <DArrowRight /> </el-icon
          ></a>
        </div>
      </div>
    </div>
    <!-- 商品列 -->
  </div>
</template>

<style lang="less" scoped>
.shop {
  margin: 0 auto;

  // 标题
  .title {
    font-size: 22px;
    color: #333;
    font-weight: 200;
  }

  // 内容样式
  .box {
    height: 614px;
    display: flex;
    .img {
      width: 234px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .content {
      flex: 1;
      .more {
        cursor: pointer;
        width: 234px;
        height: 300px;
        background: #fff;
        padding: 0px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.2s linear;
        float: left;
        margin: 0 0 14px 14px;
        &:hover {
          transform: translate3d(0, -2px, 0);
          box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
        }
        a {
          font-size: 18px;
          color: #333;
          display: flex;
          align-items: center;
          &:hover {
            color: #ff6700;
          }
        }
      }
    }
  }
}
</style>